<!--20210304  zaq  创建vue文件-->
<!--20210331  zaq  新增分组/收支信息drawer-->

<template>
<!--账簿-->
  <div>
    <el-row :gutter="12">
      <el-col
          :span="5"
          v-for="book in books">
        <el-card
            class="box-card"
            style="width: 150px">
          <div slot="header" class="clearfix">
<!--            <span>{{ '种类：'+book.kind }}</span>-->
            <span>???????</span>
            <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
          </div>
          <div >
            {{book.name+'???显示不不了？？？'}}
          </div>

          <span>???????</span>
        </el-card>
      </el-col>
    </el-row>

<!--    分组/收支信息drawer-->
    <el-button @click="drawer = true" type="primary">测试</el-button>
    <el-drawer
        title="账簿"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <span>我来啦!</span>
    </el-drawer>

  </div>
</template>

<script>
export default {
  name: "Books",
  data(){
    return {
      drawer: false,
      direction: 'rtl',
      books:[
        {
          name:'bbbb',
          kind:'1'
        },
        {
          name:'aaaa',
          kind:'2'
        }
      ],
      currentDate: new Date()
    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  }
}
</script>

<style scoped>

</style>